import React, {useState, useRef, useEffect} from 'react';
import { Form, Button, message, Row, Col, Empty, Tag, Select, Tooltip, DatePicker } from 'antd';
import { connect } from 'dva';
import { PlusOutlined,EyeOutlined,HeartOutlined,HeartFilled,EditOutlined,EyeInvisibleOutlined,ColumnWidthOutlined } from '@ant-design/icons';
import { queryDelayKRList, updateKrProcess } from '@/services/workplace'
import ScheduleCard from './components/ScheduleCard.js'
import WorkBook from './components/WorkBook.js'
import Calender from './components/Calender.js'
import event from './components/event.js'




import styles from './index.less';
import moment from 'moment';

const statusColor = new Map([
    ['0', '#f50'],
    ['1', 'geekblue'],
    ['2', 'cyan'],
    ['3','#87d068']
])
const statusTxt = new Map([
    ['0','逾期未完成'],
    ['1', '已完成'],
    ['2', '未开始'],
    ['3', '进行中'],
])

const WorkplacePage = (props) => {
  const [form] = Form.useForm();
  const { dispatch } = props;
  const [currIndex, setCurrIndex] = useState('');
  const [currStatus, setCurrStatus] = useState('');
  const [taskList, setTaskList] = useState([]);
  const [time, setTime] = useState(moment(new Date()));
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [focusList, setFocusList] = useState([
    {
        content: '通过XX工具使用，研发编写质量把关',
        isZan: true,
    },
    {
        content: '自动化系统中台的培训、搭建开发',
        isZan: false,
    },
    {
        content: '基于微服务架构的低代码平台的理论实践与构建开发',
        isZan: false,
    },
    {
        content: 'Yapi工具的培训与扩展使用',
        isZan: true,
    },
    {
        content: '改善发布管理流程，提升产品稳定性。',
        isZan: false,
    },
    {
        content: '增加到发布到生产环境的数量，加快上线速度。',
        isZan: false,
    },
    {
        content: '实施服务器运行状况监视，增加线上稳定。',
        isZan: false,
    },
    {
        content: '改进部署过程，提升产品改进速度。',
        isZan: false,
    }
  ])
  const [recordList, setRecordList] = useState([
    {
        content: '提高产品服务质量，使客户满意度达到98%',
        type: 'mouth',
    },
    {
        content: '本周完成项目功能测试，Bug全部完成修复',
        type: 'week',
    },
    {
        content: '同客户完成项目交接和培训',
        type: 'week',
    },
    {
        content: '督促客户支付尾款，部署运维和售后服务人员，签署运维合同',
        type: 'week',
    },
    {
        content: 'XX清洁能源公司项目立项，开展需求分析和项目设计',
        type: 'week',
    }
  ])
  const [myevent, setMyevent] = useState(event)
  const getSelectRef = useRef();
  let count = 20;
  useEffect(()=>{
    getList()
    // document.addEventListener('click', closeMask);
    // return () => {
    //     document.addEventListener('click', closeMask); 
    // }
}, [])

  const closeMask = (e) => {
    if(getSelectRef.current != e.target){
        // console.log('999')
    }
  }
  const getList = async () => {
    const res = await queryDelayKRList();
    if(res.code == 200){
        res?.data?.krList.shift()
        const list = [
            {
                "krname": "公文产品化统一，输出统一产品报告计划",
                "id": 56,
                "endTime": "2023-07-28",
                "status": "0"
            },
            {
                "krname": "研发人员熟悉掌握代码审查工具，输出审查报告，保证提交代码的质量",
                "id": 57,
                "endTime": "2023-09-31",
                "status": "3"
            },
            {
                "krname": "现场试点需求整理统一，按时间整理到统一公文文档中",
                "id": 58,
                "endTime": "2023-10-31",
                "status": "3"
            }
        ]
        let list2 = res?.data?.krList.concat(list)
        setTaskList(list2)
    }
  }

  const changeStatus = (val, id) => {
     if(val != currStatus){
        // update
        let params = {
            status: val,
            id,
        }
        updateKrProcess(params).then((res)=>{
            if(res.code == 200){
                getList();
            }
        })
     }
     setCurrIndex('')
  }
  const handleBlur = () => {
    setCurrIndex('')
  }
  const refreshEvent = (item) => {
    myevent.push(item);
    setMyevent(JSON.parse(JSON.stringify(myevent)))
  }
  const refreshBao = (item) => {
    recordList.push(item);
    setRecordList(JSON.parse(JSON.stringify(recordList)))
  }
  const changeTime = (date, dateString) => {
    console.log(date, dateString)
    setTime(moment(dateString))
  }

  const itemLayoutItem = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  }
  const handleChangeProcess = () => {

  }
  const options = [
    { label: '逾期未完成',value: '0'},
    { label: '已完成',value: '1'},
    { label: '未开始',value: '2'},
    { label: '进行中',value: '3'},
  ]
  return (
    <Row style={{padding: 20, background: '#eceef0', height: 'calc(100vh - 90px)',display: 'flex',justifyContent: 'center'}}>
        <Col span={16} className={styles.left_wrap}>
            <div style={{background: '#ffffff', padding: '10px', height: '58%'}}>
                <Row style={{ margin: '10px 0', fontSize: '16px' }}>
                    <Col span={4}>我的任务</Col>
                    <div style={{float: 'right'}}></div>
                </Row>
                <Row>
                    {taskList.length > 0 ? taskList.map((item, index)=>(<Col key={index} className={styles.task_wrap} span={24} style={{ padding: '8px 0' }}>
                        <Row>
                            <Col className={styles.task_status} span={4}>
                                <Tooltip trigger='click'
                                visible={currIndex === index}
                                getPopupContainer={(triggerNode) => triggerNode.parentNode}
                                placement="bottomRight" title={
                                    <Select onChange={(val) => changeStatus(val, item.id)} value={item.status} placeholder='更新状态' ref={getSelectRef} onBlur={handleBlur}>
                                        {options.map(opt=>(
                                            <Select.Option value={opt.value}>{opt.label}</Select.Option>
                                        ))}
                                </Select>
                                }>
                                <Tag onClick={()=>{setCurrIndex(index); setCurrStatus(item.status); }} color={statusColor.get(item.status + '')}>{statusTxt.get(item.status + '')}</Tag>
                                </Tooltip>
                            </Col>
                            <Col className={styles.task_name} span={12}>{item.krname}</Col>
                            <Col className={styles.task_time} span={4}>
                                {currIndex == index ? <Input value={item.process} onChange={handleChangeProcess} onBlur={handleBlur} />:<span onClick={()=>{setCurrIndex(index); }}>{item.process}</span>}
                                </Col>
                            <Col className={styles.task_time} span={4}>{item.endTime}</Col>
                        </Row>
                    </Col>)) : <Empty
                        description={
                        <span>
                            恭喜你，所有任务都完成！
                        </span>
                        }
                    >
                    </Empty>}
                </Row>
            </div>
            
            <Row gutter={30} style={{padding: '10px', margin: '20px 0 0 0'}}>
                <Col span={12} style={{marginRight:'0px'}}> 
                    <Row style={{marginTop:'10px',background: '#ffffff',padding: 10}}  className={styles.card_wrap}>
                        <Col span={24} className={styles.work_title}>我的简报&nbsp;&nbsp;
                        {/* <DatePicker  value={time} onChange={changeTime} /> */}
                        <span style={{float: 'right'}}><PlusOutlined onClick={() => {setVisible2(true)}} /></span>
                        </Col>
                        <Col span={24} style={{padding: '15px',maxHeight: '200px', overflowY: 'auto'}}>
                            <Row gutter={30} style={{marginBottom: '5px', fontSize: '15px'}}>
                                <Col span={14} style={{textIndent: '20px'}}>简报</Col>
                                <Col span={5} style={{textIndent: '20px'}}>类型</Col>
                                <Col span={5} style={{textIndent: '20px'}}>操作</Col>
                            </Row>
                            {recordList.map(item=>(
                                <Row gutter={30} style={{marginBottom: '5px'}}>
                                    <Col span={14} className={styles.focus_wrap_content}>{item.content}</Col>
                                    <Col span={5} style={{textIndent: '20px'}}>{item.type == 'week' ? '周报' : '月报'}</Col>
                                    <Col span={5} style={{textIndent: '10px',color: '#8d3cf1'}}>
                                        <ColumnWidthOutlined />
                                        <EditOutlined />
                                    </Col>
                                </Row>
                            ))}
                        </Col>
                    </Row>
                </Col>
                <Col span={12} style={{padding: 0}}>
                    <Row style={{marginTop:'10px',background: '#ffffff',padding: 10}}  className={styles.card_wrap}>
                    <Col span={24} className={styles.work_title}>我的关注&nbsp;&nbsp;<EyeOutlined /></Col>
                    <Col span={24} style={{padding: '15px',maxHeight: '200px', overflowY: 'auto'}}>
                        <Row gutter={30} style={{marginBottom: '5px', fontSize: '15px'}}>
                            <Col span={16} style={{textIndent: '20px'}}>关注内容</Col>
                            <Col span={8} style={{textIndent: '30px'}}>操作</Col>
                        </Row>
                        {focusList.map(item=>(
                            <Row gutter={10} style={{marginBottom: '5px'}}>
                                <Col span={18} className={styles.focus_wrap_content}>{item.content}</Col>
                                <Col span={6} style={{color: '#8d3cf1'}}>
                                    <EyeInvisibleOutlined />
                                    <span style={{margin: '0 8px'}}>{item.isZan ? <HeartFilled /> : <HeartOutlined />}</span>
                                    <EditOutlined />
                                </Col>
                            </Row>
                        ))}
                </Col>
            </Row>
                </Col>
            </Row>
        </Col>
        <Col span={7} className={styles.right_wrap}>
            <Row style={{background: '#ffffff',padding: 10, display: 'flex', justifyContent: 'center'}}>
                <Col span={8} style={{ textAlign:'center' }}>
                    <span style={{ fontFamily: 'lcletter', fontSize: '24px', color: '#348fe4' }}>38</span><br />
                    <span>已完成</span>
                </Col>
                <Col span={8} style={{ textAlign:'center' }}>
                    <span style={{ fontFamily: 'lcletter', fontSize: '24px', color: 'green' }}>{taskList.filter(item=>(item.status == '2' || item.status == '3')).length}</span><br />
                    <span>未完成</span>
                </Col>
                <Col span={8} style={{ textAlign:'center' }}>
                    <span style={{ fontFamily: 'lcletter', fontSize: '24px', color: '#ff7575' }}>{taskList.filter(item=>item.status == '0').length}</span><br />
                    <span>延期</span>
                </Col>
            </Row>
            <Row style={{marginTop:'10px',background: '#ffffff',padding: 10}}>
                <Col span={24} className={styles.work_title} style={{marginBottom: '10px'}}>我的日程&nbsp;&nbsp;
                {/* &nbsp;&nbsp;&nbsp;&nbsp;<DatePicker  value={time} onChange={changeTime} /> */}
                   <span style={{float: 'right'}}>&nbsp;&nbsp;<PlusOutlined onClick={() => {setVisible(true)}} /></span>
                </Col>
                <Col span={24}>
                    <Calender event={myevent}></Calender>
                </Col>
            </Row>
           
            <Row style={{marginTop:'10px',background: '#ffffff',padding: 10}}>
                <Col span={24} className={styles.work_title}>详细资料</Col>
                <Col span={24} style={{padding: '15px',maxHeight: '200px', overflowY: 'auto'}}>
                    <Row>
                        <Col span={4}>姓名</Col>
                        <Col span={16}>刘玥</Col>
                    </Row>
                    <Row>
                        <Col span={4}>手机</Col>
                        <Col span={16}>13089235678</Col>
                    </Row>
                    <Row>
                        <Col span={4}>部门</Col>
                        <Col span={16}>第一事业部</Col>
                    </Row>
                    <Row>
                        <Col span={4}>职位</Col>
                        <Col span={16}>前端开发工程师</Col>
                    </Row>
                    <Row>
                        <Col span={4}>邮箱</Col>
                        <Col span={16}>13089235678@163.com</Col>
                    </Row>
                </Col>
            </Row>
            {visible && <ScheduleCard visible={visible} onCloseVisible={()=>{setVisible(false)}} refreshEvent={refreshEvent}></ScheduleCard>}
            {visible2 && <WorkBook visible={visible2} onCloseVisible={()=>{setVisible2(false)}} refreshBao={refreshBao}></WorkBook>}
        </Col>
    </Row>
  );
};


export default connect()(WorkplacePage);
